<template>
	<view class="beijingse mainpadding">
		<view class="mainpadding ffffff radius">
			<view class="flexleft">
				<view class="ershil margin_right2">商品评价</view>
				<view class="">
					<u-rate count="5" v-model="describe" active-color="#FAB536" size="20px"></u-rate>
				</view>
			</view>
			<textarea class="margin_top textareas" cols="30" rows="10" placeholder="请输入您的评价~" v-model="comment"></textarea>
			<view class="flexleft flex_wrap">
				<view class="sanshisan flexcenter margin_top" v-for="(item,index) in imgList" :key="index">
					<view class="shilitu dingwei">
						<image :src="item" mode=""></image>
						<view class="shanchubox" @click="delimage(index)">
							<view class="shanchu"></view>
						</view>
					</view>
				</view>
				<view class="sanshisan flexcenter margin_top" v-if="imgList.length<5" @click="uploadImg">
					<view class="djsc">
						<image src="../../static/image/system/tjtp.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<view class="ershil">店铺服务评价</view>
			<!-- <view class="flexleft margin_top">
				<view class="noershil ">商品符合度</view>
				<view class="">
					<u-rate count="5" v-model="valuesp" active-color="#FAB536" size="20px"></u-rate>
				</view>
			</view> -->
			<view class="flexleft margin_top">
				<view class="noershil ">商家服务态度</view>
				<view class="">
					<u-rate count="5" v-model="service" active-color="#FAB536" size="20px"></u-rate>
				</view>
			</view>
			<view class="flexleft margin_top">
				<view class="noershil ">快递配送速度</view>
				<view class="">
					<u-rate count="5" v-model="logistics" active-color="#FAB536" size="20px"></u-rate>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="mainpadding">
			<view class="bigbtn" @click="submit">发表</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				describe: "", //商品评价
				service:"",
				logistics:"",
				listid:"",
				comment:"",//评论内容
				imgList:[],//评论内容
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		methods: {
			submit(){
				if (this.describe == "") {
					httpRequest.toast("请对商品进行评价")
					return
				}
				if (this.comment == "") {
					httpRequest.toast("请输入评价内容")
					return
				}
				if (this.service == "") {
					httpRequest.toast("请对商家服务态度进行评价")
					return
				}
				if (this.logistics == "") {
					httpRequest.toast("请对快递配送速度进行评价")
					return
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				httpRequest.request('/api/order/commentOrder', 'POST', {
					id: this.listid,
					comment: this.comment,
					imgList: this.imgList.join(),
					describe: this.describe,
					service: this.service,
					logistics: this.logistics,
				}, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			delimage(index){
				this.imgList.splice(index,1)
			},
			uploadImg(upimg) {
				let _this = this
			
				let upImgs = _this.imgList;
				let num = 5 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i],upimg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i],upimg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url,upimg) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.imgList.push(image_item)
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noershil {
		width: 200rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.djsc {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}

	.shanchu {
		width: 13rpx;
		height: 13rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shanchu.png');
	}

	.shanchubox {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 39rpx;
		height: 23rpx;
		background: #D0D0D0;
		border-radius: 0px 7rpx 0px 7rpx;
	}

	.shilitu {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}

	.sanshisan {
		width: 33.33%;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}

	.ershil {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>
